import FH from '@/assets/返回.svg?react'
import { useNavigate } from 'react-router'

type IMemberHeader = {
    title: string;
    titleClass?: string;
    selectionVisible?: boolean;
    navigater?: string | (() => void);
}

function MemberHeader({ title, titleClass, selectionVisible = false, navigater }: IMemberHeader) {
    const navigate = useNavigate()

    return (
        <>
            <div
                className="w-full h-[87px] flex leading-[87px] bg-[#FFF]"
                style={{ borderBottom: '1px solid #ddd' }}
            >
                <FH
                    className='w-[22.2px] h-[39.4px] ml-[38.9px] mt-[30px]'
                    onClick={() => {
                        if (navigater) {
                            if (typeof navigater === 'string') {
                                navigate(navigater)
                            } else {
                                navigater()
                            }
                        }
                    }}
                />
                <h2
                    className={`${titleClass}`}
                >
                    {title}
                </h2>
            </div>
            {selectionVisible && <span
                className="absolute right-[24px] top-[23px] text-[30px]"
                onClick={() => {
                    navigate('/filter')
                }}
            >
                筛选
            </span>}
        </>
    )
}
export default MemberHeader